<template>
	<view class="sub-money-content">
		<view class="home-top">
			<view class="home-title">邀请送现金</view>
			<image src="../../../static/common/sub-money-back.png" class="sub-back-icon" @tap="goHome"></image>
			<image src="../../../static/common/sbu-home-top-icon.png" class="sub-home-top-icon" @tap="contactKF"></image>
		</view>
		
		<view class="invite-box-1">
			<view class="invite-money">
				<text> ￥{{money}}</text>红包
			</view>
		</view>
	
		<view class="invite-box-2">
			<view class="invite-block">
				<view class="invite-item" v-if="headimgList.length>0" v-for="(item,index) in headimgList" :key="index">
					<image :src="getImg(item)" class="user-avator"></image>
					<view class="invite-text">已邀请</view>
				</view>
				<view class="invite-item" @tap="openShare">
					<image src="../../../static/common/invite-add.png" class="user-avator"></image>
					<view class="invite-text color">待邀请</view>
				</view>
			</view>
			<view class="tip-text">
				需在{{str}}内参加超级返
			</view>
			<image src="../../../static/common/invite-recive.png" class="invite-recive"></image>
		</view>
		<view class="red-bag-blok">
			<navigator url="../sub-hongbao/sub-hongbao" hover-class="none">
				<view>我的红包 >></view>
			</navigator>
			<navigator url="../sub-rules/sub-rules" hover-class="none">
				<view>活动规则 >></view>
			</navigator>
			
			
		</view>
		
		
	<!-- 分享 -->
	<uni-popup ref="showshare" :type="type">
		<view class="uni-share">
			<view class="banner">
				<view class="img">
					<canvas  canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}"></canvas>
				</view>
				<view class="tgtit">推广链接：<text class="tugurl">{{qrcoedSrc}}</text></view>
				<view class="sharbuttn">
					<view class="btn" @tap="save">保存二维码</view>
					<view class="btn" @tap="sharurl">复制推广链接</view>
				</view>
				<view class="shartitle"><view>分享</view></view>
				<view class="sharapk">
					<view><image src="../../../static/common/share-wxf.png" @tap="InviteShare('WXSceneSession')"></image></view>
					<view><image src="../../../static/common/share-wxq.png" @tap="InviteShare('WXSenceTimeline')"></image></view>
				</view>
				<view class="bottom">
					<ul>
						<li>1、好友识别二维码通过手机号进行注册</li>
						<li>2、注册完成后您即可得到相应的鼓励金</li>
					</ul>
				</view>
			</view>
		</view>
	</uni-popup>
	</view>
</template>

<script>
	import uniPopup  from'../../../components/uni-popup/uni-popup.vue'
	import uQRCode from '../../../util/uqrcode.js'
	export default{
		name:"subMoney",
		data(){
			return{
				type: 'bottom',
				apptoken:"",
				money:"",
				person:"",
				taskType:"",
				headimgList:[],
				task:"",
				str:"",
				qrcoedSrc:"",
				qrcodeSize:150,
				qrImg:""
			}
		},
		components:{
			uniPopup
		},
		onLoad(optinos) {
			
			this.apptoken = uni.getStorageSync('apptoken');
			this.taskType = optinos.taskType;
			
			if(this.taskType == 1){
				this.money = 5;
			}
			if(this.taskType == 2){
				this.money = 12.8;
			}
			if(this.taskType == 3){
				this.money = 20.8;
			}
			if(this.taskType == 4){
				this.money = 28.8;
			}
			
			this.getTaskDetail();
			this.getInviteUrl();
		},
		methods:{
			getInviteUrl(){
				//获取邀请链接，邀请链接有时间有效期，所以不能缓存，要实时获取
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.userView,
					data:{
						apptoken:this.apptoken
					},
					success(res) {
							console.log(res)
							if(res.data.success){
								_this.qrcoedSrc = res.data.data.inviteUrl;
								console.log(_this.qrcoedSrc)
							}
					}
				})
			},
			getImg(img){
				return this.$CommonJS.getBaseImgUrl(img)
			},
			getTaskDetail(){
				const _this = this;
				const url = this.$API.URL + this.$API.inviteTask;
				console.log(url)
				uni.request({
					url:url,
					data:{ apptoken:this.apptoken,taskType:this.taskType },
					success(res) {
						console.log(res);
						if(res.data.success){
							_this.headimgList = res.data.headimgs;
							_this.task = res.data.data;
							_this.getTimes(res.data.data.createTime.time)
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			getTimes(time){
				const _this = this;
				let t = time + 86400000;
				
				var timer = setInterval(function(){
					let n = new Date().getTime();
					let c = t - n;
					if(c<0){
						_this.str = 0 +"小时" + 0 +"分" + 0 +"秒"
						clearInterval(timer)
					}else{
						let hour=Math.floor(c/1000/60/60%24);
						let min=Math.floor(c/1000/60%60);
						let sec=Math.floor(c/1000%60);
						_this.str = hour +"小时" + min +"分" + sec +"秒"
					}
				},1000)
				
				
			},
			makeQrcodeImg(url){
				console.log(url);
				const _this = this;
				//生成二维码
				uQRCode.make({
					canvasId: 'qrcode',
					text: url,
					size: _this.qrcodeSize,
					margin: 10,
					success: res => {
						console.log(res)
						_this.qrImg = res;
						
					}
				})
			},
			save(){
				uni.saveImageToPhotosAlbum({
						filePath: this.qrImg,
						success: function () {
								uni.showToast({
									title:"图片保存成功"
								})
						}
				});
			},
			sharurl(){
				uni.setClipboardData({
				    data: this.qrcoedSrc,
				    success: function () {
				        uni.showToast({
				        	title:"链接复制成功"
				        })
				    }
				});
			},
			InviteShare(scene){
				uni.share({
				    provider: "weixin",
				    scene: scene,
				    type: 2,
				    imageUrl: this.qrImg,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			openShare(){
				this.$refs['showshare'].open();
				 this.makeQrcodeImg(this.qrcoedSrc);
			},
			goHome(){
				uni.navigateBack()
			},
			contactKF(){
				this.$CommonJS.navigateTo('../sub-kefu/sub-kefu')
			},
			cancel(type) {
				this.$refs['show' + type].close();
			},
		}
	}
</script>

<style scoped>
	@import url("sub-makeInvite.css");
	.tugurl{
		color: #999;
	}
	.sharbuttn{
		display: flex;
		justify-content: center;
	}
	.shartitle{
		    width: 80%;
			text-align: center;
			margin-left: 10%;
			border-bottom: 1px solid #dddddd;
			position: relative;
			height: 60upx;
	}
	.tgtit{
		text-align: center;
		font-size: 11px;
		margin-top: 20upx;
	}
	.shartitle view{
		    height: 50upx;
			line-height: 50upx;
			font-size: 28upx;
			color: #999;
			width: 120upx;
			margin: 32upx auto;
			position: absolute;
			background: #fff;
			left: 50%;
			margin-left: -60upx;
	}
	.sharapk{
	 display: flex;
	 justify-content: center;
	 margin: 20upx auto;
	}
	.sharapk view{
		margin: 20upx 50upx;
	}
	.sharapk view image{
		height: 80upx;
		width: 80upx;
	}
	.banner{
		width: 100% ;
		background-color: #FFFFFF;
		border-radius: 60upx 60upx 0 0;
		margin-top: -60upx;
	}
	.banner dl{
		margin-top: -80upx;
	}
	.banner dl dt{
		text-align: center;
	}
	.banner dl dt image{
		width: 160upx;
		height: 160upx;
		border-radius:50% ;
	}
	.banner dl dd{
		text-align: center;
	}
	.img{
		width: auto;
		height: auto;
		margin: 0 auto;
		padding-top: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.btn{
		width: 260upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0 auto;
		margin-top: 60upx;
		border-radius: 40upx;
		border: 0;
		font-size: 26upx;
		outline: 0;
		background: #33b17b;
		color: #FFFFFF;
		text-align: center;
	}
	.bottom{
		width: 100%;
		height: auto;
		background-size: 20%;
		padding-bottom: 50upx;
	}
	.bottom ul{
		padding-left: 40upx;
		box-sizing: border-box;
	}
	.bottom ul li{
		width: 100%;
		height: 40upx;
		font-size: 13px;
		list-style: none;
	}
</style>
